<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>3D 卡片悬浮</title>
    <style>
      :root {
        --card-height: 300px;
        --card-width: calc(var(--card-height) / 1.5);
      }
      * {
        box-sizing: border-box;
      }
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #191c29;
      }
      .card {
        width: var(--card-width);
        height: var(--card-height);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding: 0 36px;
        perspective: 2500px;
        margin: 0 50px;
      }

      .cover-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .wrapper {
        transition: all 0.5s;
        position: absolute;
        width: 100%;
        z-index: -1;
      }

      .card:hover .wrapper {
        transform: perspective(900px) translateY(-5%) rotateX(25deg)
          translateZ(0);
        box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
        -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
      }

      .wrapper::before,
      .wrapper::after {
        content: '';
        opacity: 0;
        width: 100%;
        height: 80px;
        transition: all 0.5s;
        position: absolute;
        left: 0;
      }
      .wrapper::before {
        top: 0;
        height: 100%;
        background-image: linear-gradient(
          to top,
          transparent 46%,
          rgba(12, 13, 19, 0.5) 68%,
          rgba(12, 13, 19) 97%
        );
      }
      .wrapper::after {
        bottom: 0;
        opacity: 1;
        background-image: linear-gradient(
          to bottom,
          transparent 46%,
          rgba(12, 13, 19, 0.5) 68%,
          rgba(12, 13, 19) 97%
        );
      }

      .card:hover .wrapper::before,
      .wrapper::after {
        opacity: 1;
      }

      .card:hover .wrapper::after {
        height: 120px;
      }
      .title {
        width: 100%;
        transition: transform 0.5s;
      }
      .card:hover .title {
        transform: translate3d(0%, -50px, 100px);
      }

      .character {
        width: 100%;
        opacity: 0;
        transition: all 0.5s;
        position: absolute;
        z-index: -1;
      }

      .card:hover .character {
        opacity: 1;
        transform: translate3d(0%, -30%, 100px);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="wrapper">
        <img
          src="https://gd-hbimg.huaban.com/768fb9e505479fc6c3c5704bf5a3e20b1ba5f119124aa-HvpIF1_fw1200"
          class="cover-image"
        />
      </div>
      <img
        src="https://gd-hbimg.huaban.com/e85d1bb632aa065a7c3e7e7b3f2fd0021300b39680c07-vO28MC"
        class="title"
      />
      <img
        src="https://gd-hbimg.huaban.com/d0273d6311acc8641c7715ee5b09217e26880c15146b5-pFqBHa_fw1200"
        class="character"
      />
    </div>

    <div class="card">
      <div class="wrapper">
        <img
          src="https://gd-hbimg.huaban.com/cbcd12b8d1ea9abb955f022de6a37be26ab73b9423921-YBTOhc"
          class="cover-image"
        />
      </div>
      <img
        src="https://gd-hbimg.huaban.com/e85d1bb632aa065a7c3e7e7b3f2fd0021300b39680c07-vO28MC"
        class="title"
      />
      <img
        src="https://gd-hbimg.huaban.com/84675eb16a4dcc4b86db8652647eae15e87c99bf63b593-Z0Xb2S"
        class="character"
      />
    </div>
  </body>
</html>
